<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style type="text/css">
	body { 
        padding-top: 70px;
    }

	.sub-menu{
        height: 30px;
    }
    .happy_home_display{
        display: inline-block;
        background: url("resources/images/bgHeader.png") no-repeat scroll right 0;
        background-position: right -19px;
    }

    .my_search{
        background-position: right -196px;
        background-color: #000000;
    }

    .my_search a{
        color: #FFFFFF;
    }

    .my_search a:hover{
        color: #FFFFFF;
    }

    .my_favorites:hover{
        background-position: right -39px;
    }
    .sub-menu > ul > li >a:hover{
        text-decoration: none;
    }
    .simplesearch{
        position: absolute;
        z-index: 10;
        width: 100%;
        margin: 0 auto;
    }

    .background_simple_search{
        padding-top: 15px;
        height: 60px;
        background-image: url("resources/images/background_simple_search.png");
        background-repeat: repeat-x;
        margin-top: -10px;
    }

    #openSearchFilter{
        text-transform: uppercase;
        width: 90px;
        padding-left: 10px;
        border-top-right-radius: 0.5em;
        border-top-left-radius: 0.5em;
        margin-right: -1px;
    }

    .happy_home_display .my_search{
        background: #000;
    }

    ul li a {
        color: #000000;
    }
    ul li a:hover {
        color: #000000;
    }

    .sub-menu ul ul {
        display: none;
    }

    .sub-menu ul li:hover > ul{
        display: block;
        position: absolute;
        z-index: 20;
        width: 300px;
        margin-left: -20px;
        background: #fff;
    }

    .sub-menu ul ul li{
        list-style: none;
    }
    .sub-menu ul ul li span{
        font-weight: bold;
        margin-bottom: -7px;
        text-transform: uppercase;                
    }
</style>

<div class="container">
    <div class="sub-menu">
        <ul class="pull-right" style="list-style: none outside none; display: inline-block;">
            <li class="happy_home_display"><a href="#">My favorites <span class="badge">0</span></a>
            	<ul>
                     <li>
                         <span>Start building your wishlist</span>
                         <p style="text-align: left;padding-right: 10px;">
                             Add your favorites and save them for later, or request multiple properties at the same time.  We'll save your wishlist for your next visit. 
                         </p>
                     </li>
                </ul>
            </li>
            <li class="happy_home_display open my_search" id="openSearchFilter"><a href="#">Search</a></li>
        </ul>
    </div>
</div>
<div class="simplesearch">
    <div class="container">
        <div class="col-md-12 background_simple_search">
        	<form role="form" id="simpleSearchForm" enctype="multipart/form-data" method="post">
	            <c:if test="${not empty listDistricts }">
		            <select id="example39" multiple="multiple">
		            	<c:forEach var="district" items="${listDistricts }">
			                <option value="${district.idDistrict }">${district.nameDistrict }</option>
		                </c:forEach>
		            </select>
                </c:if>
	            <div class="col-md-5 col-sm-12 col-xs-12">
	            	<label for="amount" style="color:#FFFFFF;">Price range:</label>
					<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold; background-color: transparent;"/>
					<div id="slider-range"></div>
	            </div>
	            <button type="button" class="btn btn-info col-md-2 col-sm-12 col-xs-12" onclick="advancedSearch('${pageContext.request.contextPath}')">Search &nbsp;</button>
	        </form>
        </div>
    </div>
</div>  